<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米商城</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="font_2973804_ddtcz4vvlhg/iconfont.css">
    <link rel="stylesheet" href="css/header.css">
    <link rel="stylesheet" href="css/footer.css">
    <link rel="stylesheet" href="css/main.css">
    <style>

        /* --------轮播图部分----------- */
        
        .zhong{
            
            width: 100%;
        }
        .zhong .center{
            width: 1535px;
            height: 585px;
            margin: auto;
            display: flex;
            /* position: relative; */
        }
        .zhong .center .left{
            width: 295px;
            height: 585px;
            display: flex;
            flex-direction: column;
            background-color: #697e8c;
            
           
        }
        .zhong .center .left a{
            height: 55px;
            padding-top: 2px;
            line-height: 55px; 
            display: flex;
            color: white;
           
        }
        .zhong .center .left a span:nth-child(1){
            padding-left: 40px;
        }
        .zhong .center .left a span:nth-child(2){
            padding-left: 130px;
            font-size: 20px;
        }
        .zhong .center .left a:nth-child(1) span:nth-child(2){
            padding-left: 170px;
        }
        .zhong .center .left a:nth-child(2) span:nth-child(2){
            padding-left: 170px;
        }
        .zhong .center .left a:nth-child(3) span:nth-child(2){
            padding-left: 115px;
        }
        .zhong .center .left a:nth-child(4) span:nth-child(2){
            padding-left: 170px;
        }
        .zhong .center .left a:nth-child(6) span:nth-child(2){
            padding-left: 115px;
        }
        .zhong .center .left a:hover{
            background-color: orange; 
        }

        .zhong .center .right{
            width: 1240px;
            height:585px ;
            position: relative;
        }

        
        .zhong .center  button{
            width: 50px;
            height: 80px;
            border: none;
            color: #edeeef;
            background-color:#bac4cb ;
            opacity: 0.1;
            font-size: 40px;
        }
        .zhong .center  button:hover{
            background-color: #5f646b;
            opacity: 0.9;
        }
        .zhong .center  #toleft{
            position: absolute;
            top: 205px;
            left: 0;
           
        }
        .zhong .center #toright{
            position: absolute;
            top: 205px;
            right: 0;
           
        }
        .zhong .center  ul{
            width: 80px;
            height: 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: absolute;
            bottom: 30px;
            right: 80px;
           
        }
        .zhong .center ul li{
            width: 16px;
            height: 16px;
            border-radius: 50% ;
            background-color: #cccccc;
        }
        .zhong .center #lunbobox{
            width: 1240px;
            height:585px ;
            /* background-size:1240px 585px ;
            transition: 1s all linear; */
        }
        .zhong .center #lunbobox img{
            width: 1240px;
            height:585px ;
            position: absolute;
            left: 0;
            top: 0;
        }


        .zhong .center .right .xiangxi{
            height: 585px;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            flex-wrap: wrap;
            /* background-color: white; */
            position: absolute;
            z-index: 4;
            left: 0;
            top: 0;
            display: none;
        }
        .zhong .center .right .xiangxi figure{
            width: 260px;
            height: 97px;
            display: flex;
            justify-content: space-around;
            align-items: center;
              background-color: white;
        }
        .zhong .center .right .xiangxi figure img{
            width: 60px;
            height: 50px;
            /* border: 1px solid red; */
        }
        .zhong .down {
            width: 100%;
            padding-top: 20px;
            padding-bottom: 30px;
        }
        .zhong .down .cente{
            width: 1535px;
            height: 212px;
            margin: auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .zhong .down .cente section{
            width: 360px;
            height: 212px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            flex-wrap: wrap;
            /* flex-shrink: 0; */
            background-color: #5f5750;
        }
        .zhong .down .cente section figure{
            width: 120px;
            height: 105px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: #cccac7;
        }
        .zhong .down .cente section figure:hover{
            color: white;
        }
        .zhong .down .cente section figure .iconfont{
            font-size: 30px;
        }
        .zhong .down .cente div{
            width: 360px;
            height: 212px;
        }
        .zhong .down .cente div img{
            width: 360px;
            height: 212px;
        }


      


        body{
            position: relative;
        }
        .celan{
            height: 702px;
            width: 102px;
            font-size: 20px;
            color: #999999;
            
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            position: fixed;
            right: 0;
            top: 150px;
        }
        .celan figure{
            width: 102px;
            height: 110px;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
            background-color: white;
        }
        .celan figure:hover{
            color: orange;
        }
        .celan figure:nth-child(6){
            margin-top: 30px;
            opacity: 0;
        }
        .celan figure .iconfont{
            font-size: 32px;
        }
    </style>
</head>
<body>
   <header>
       
   </header>


    <div class="zhong">
    <div class="center" >
        <div class="left">
            <a href="">
                <span>手机</span>
                <span> > </span>
            </a>
            <a href="">
                <span>电视</span>
                <span> > </span>
            </a>
            <a href="">
                <span>笔记本 平板</span>
                <span> > </span>
            </a>
            <a href="">
                <span>家电</span>
                <span> > </span>
            </a>
            <a href="">
                <span>出行 穿戴</span>
                <span> > </span>
            </a>
            <a href="">
                <span>智能 路由器</span>
                <span> > </span>
            </a>
            <a href="">
                <span>电源 配件</span>
                <span> > </span>
            </a>
            <a href="">
                <span>健康 儿童</span>
                <span> > </span>
            </a>
            <a href="">
                <span>耳机 音响</span>
                <span> > </span>
            </a>
            <a href="">
                <span>生活 箱包</span>
                <span> > </span>
            </a>

        </div>

        <div class="right">

           

            <div id="lunbobox">
                <img />
                <img />
                <img />
                <img />
               
            </div>
             <button id="toleft"> < </button>
            <button id="toright"> > </button>
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>

                   <div class="xiangxi">
            <figure> <img/>
                <figcaption>1</figcaption>
            </figure>
            <figure> <img/>
                <figcaption>2</figcaption>
            </figure>
            <figure> <img/>
                <figcaption>3</figcaption>
            </figure>
            <figure> <img/>
                <figcaption>4</figcaption>
            </figure>
            <figure> <img/>
                <figcaption>5</figcaption>
            </figure>
            <figure> <img/>
                <figcaption>6</figcaption>
            </figure>
            <figure> <img/>
                <figcaption>1</figcaption>
            </figure>
            <figure> <img/>
                <figcaption>2</figcaption>
            </figure>
            <figure> <img/>
                <figcaption>3</figcaption>
            </figure>
            <figure> <img/>
                <figcaption>4</figcaption>
            </figure>
            <figure> <img/>
                <figcaption>5</figcaption>
            </figure>
            <figure> <img/>
                <figcaption>6</figcaption>
            </figure>
        </div>

        </div>
    </div>

    <div class="down">
        <div class="cente">
            <section>
                <figure>
                    <span class="iconfont icon-shijian"></span>
                <figcaption>保障服务</figcaption>
                </figure>
                <figure>
                    <span class="iconfont icon-qiyetuangou-01"></span>
                <figcaption>企业团购</figcaption>
                </figure>
                <figure>
                    <span class="iconfont icon-Fnum"></span>
                <figcaption>F码通道</figcaption>
                </figure>
                <figure>
                    <span class="iconfont icon-mifenka"></span>
                <figcaption>米粉卡</figcaption>
                </figure>
                <figure>
                    <span class="iconfont icon-yijiuhuanxin"></span>
                <figcaption>以旧换新</figcaption>
                </figure>
                <figure>
                    <span class="iconfont icon-huafeichongzhi"></span>
                <figcaption>话费充值</figcaption>
                </figure>
            </section>
            <div>
                <img src="img/1.1 (1).jpg" alt="">
            </div>
            <div>
                <img src="img/2.jpg" alt="">
            </div>
            <div>
                <img src="img/3.jpeg" alt="">
            </div>
        </div>
    </div>

</div>

    <div class="main"></div>


   <footer></footer>


    <div class="celan">
        <figure>
            <span class="iconfont icon-shoujiapp"></span>
            <figcaption>手机APP</figcaption>
        </figure>
        <figure>
            <span class="iconfont icon-xiazai"></span>
            <figcaption>个人中心</figcaption>
        </figure>
        <figure>
            <span class="iconfont icon-shouhoufuwu"></span>
            <figcaption>售后服务</figcaption>
        </figure>
        <figure>
            <span class="iconfont icon-shouhoufuwu"></span>
            <figcaption>人工客服</figcaption>
        </figure>
        <figure>
            <span class="iconfont icon-gouwuchekong"></span>
            <figcaption>购物车</figcaption>
        </figure>
        <figure>
            <span class="iconfont icon-didian"></span>
            <figcaption>回顶部</figcaption>
        </figure>

    </div>
</body>
</html>
<script src="js/jQuery.js"></script>
<script src="js/ajaxFun.js"></script>
<script src="js/lunbo.js"></script>
<script>
 
    $("header").load("header.html");
    $("footer").load("footer.html");
    $(".main").load("main.html");

    

 $(" div[class=left] a").mousemove(function(){
        $("div[class=xiangxi]").css({
            display:"flex"
            
        });
    });
    $("div[class=left] a").mouseout(function(){
        $("div[class=xiangxi").css({
            display:"none"
        });
    });


    ajaxFun("get","./goodsAndShoppingCart/getGoodsList.php",true,"",fun);
    function fun(resText){
        let json = JSON.parse(resText);
        // console.log(json);

            for(let i=0;i<$(".zhong .center .right .xiangxi figure").length;i++){
            $(".zhong .center .right .xiangxi figure").eq(i).find("img").attr("src",json[i].goodsImg);
            $(".zhong .center .right .xiangxi figure").eq(i).find("figcaption").html(json[i].goodsName);
            
        }

    }

    // $("div[class=celan]").onscroll = function(){
    //     $(window).scrollTop(function(){
    //    
    $(window).scroll(function(){
        let H = $(window).scrollTop();
        if(H >= 1300){
            $("div[class=celan]").css({
                top:100
            });
            $(".celan figure:last").css({
                opacity: "1"
            }).click(function(){
                $(window).scrollTop(0);
            });
        }else{
            $("div[class=celan]").css({
                top:150
            });
            $(".celan figure:last").css({
                opacity: "0"
            });
        }
    });

  

   
</script>
